<!--
 * @Description:大屏模版3
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 19:47:34
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="home-div">
    <div class="layout1 layout-left-top">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart"></div>
        <!-- 样式盒子 -->
        <div class="border-foot"></div>
      </div>
    </div>
    <div class="layout1 layout-left-center">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart"></div>
        <div class="border-foot"></div>
      </div>
    </div>
    <div class="layout1 layout-left-bottom">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart"></div>
        <div class="border-foot"></div>
      </div>
    </div>
    <div class="layout2 layout-center-top">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart">
          <pyrimid></pyrimid>
        </div>
        <div class="border-foot"></div>
      </div>
    </div>
    <div class="layout2 layout-center-bottom">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart"></div>
        <div class="border-foot"></div>
      </div>
    </div>
    <div class="layout3 layout-right-top">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart"></div>
        <div class="border-foot"></div>
      </div>
    </div>
    <div class="layout3 layout-right-bottom">
      <div class="panel border-all">
        <div class="title">标题</div>
        <div class="chart"></div>
        <div class="border-foot"></div>
      </div>
    </div>
  </div>
</template>

<script>
import pyrimid from '@/components/pyrimid/index.vue'
export default {
  components: {
    pyrimid
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.home-div {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: url('~@/assets/images/bigscreen/bg2.jpg') no-repeat;
  background-size: 100% 100%;
  right: 0;
  bottom: 0;
  left: 0;
}

.layout1 {
  position: absolute;
  width: 25%;
}
.layout2 {
  position: absolute;
  width: 50%;
}
.layout3 {
  position: absolute;
  width: 25%;
}
.layout-left-top {
  left: 0;
  top: 0;
  height: 33.33%;
}
.layout-left-center {
  left: 0;
  top: 33.33%;
  height: 33.33%;
}
.layout-left-bottom {
  left: 0;
  top: 66.66%;
  height: 33.33%;
}
.layout-center-top {
  top: 0;
  left: 25%;
  right: 66.6%;
  height: 75%;
}
.layout-center-bottom {
  top: 75%;
  left: 25%;
  right: 66.6%;
  bottom: 0;
}
.layout-right-top {
  top: 0;
  right: 0;
  height: 50%;
}
.layout-right-bottom {
  top: 50%;
  right: 0;
  bottom: 0;
}
.panel {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  right: 0.5rem;
  bottom: 0.5em;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.panel.border-left-top:before,
.panel.border-all:before {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  content: '';
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  left: 0;
  top: 0;
}
.panel.border-right-top:after,
.panel.border-all:after {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  content: '';
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  top: 0;
}
.panel.border-left-bottom .border-foot:before,
.panel.border-all .border-foot:before {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  content: '';
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  left: 0;
  bottom: 0;
}
.panel.border-right-bottom .border-foot:after,
.panel.border-all .border-foot:after {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  content: '';
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
.panel > .title {
  position: absolute;
  top: 0.2rem;
  right: 0.3rem;
  left: 0.3rem;
  height: 1.8rem;
  @include font_color('title_color');
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.panel .chart {
  position: absolute;
  top: 2.4rem;
  right: 0.3rem;
  bottom: 0.3rem;
  left: 0.3rem;
}
.layout-center-top .chart-left {
  position: absolute;
  right: 52%;
  text-align: center;
}
.layout-center-top .chart-right {
  position: absolute;
  left: 52%;
  text-align: center;
}
</style>
